<html>
	<head>
		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
		<link type="text/css" rel="stylesheet" href="style.css">
		<title>Function displayer</title>
		<script type="text/javascript">
			function updateImage() {
				v = function(id) { return $("#"+id+"")[0].value }
				f = encodeURIComponent($("#f")[0].value)
				$("#dxvalue")[0].textContent = dx
				$("#dyvalue")[0].textContent = dy
				$("#display").attr("src", "display.jpg?" +
					"f="+ f +
					"&dx=" + v("dx") + "&dy=" + v("dy") +
					"&minX=" + v("minX") + "&maxX=" + v("maxX") +
					"&minY=" + v("minY") + "&maxY=" + v("maxY") +
					"&jpeg=" + ($("#jpeg").is(':checked')?1:0));
				return true;
			};
			
			$(document).ready(function(event) {
				$("input").change(updateImage);
				$("input").keyup(updateImage);
				updateImage();
			});
		</script>
	</head>
	<body>
		<div class="centered">
			<h1>Campoy's function displayer</h1>		
			<form action="javascript:">
				<div class="parameter" id="function">
					<label>f(x) = </label>
					<input type="text" id="f" value="x"/>
				</div>
				<div class="parameter" id="encoding">
					<input type="checkbox" id="jpeg">Use jpeg encoding</input>
				</div>
				<div class="parameter" id="resolution">
					<label>Resolution</label>
					<input type="range" id="dx" min="1" max="5000" value="500"/>
					<input type="range" id="dy" min="1" max="5000" value="500"/>
					<label id="dxvalue">500</label>
					<span>x</span>
					<label id="dyvalue">500</label>
				</div>
				<div class="parameter" id="viewport">
					<label>Viewport</label>
					<dl>
					<dt>X</dt>
					<dd>
						<input type="text" id="minX" value="-10"/>
						<span>to</span>
						<input type="text" id="maxX" value="10"/>
					</dd>
					<dt>Y</dt>
					<dd>
						<input type="text" id="minY" value="-10"/>
						<span>to</span>
						<input type="text" id="maxY" value="10"/>
					</dd>
					</dl>
				</div>
			</form>
			<img id="display" src="display.jpg?f='x'&dx=500&dy=500"/>
		</div>
	</body>
</html>